<template>
  <van-cell-group>
    <van-field
      v-model="name"
      required
      clearable
      autosize
      type="textarea"
      rows="1"
      label="视频名称"
      placeholder="请输入视频名称"
    />
    <van-field
      v-model="description"
      required
      clearable
      autosize
      type="textarea"
      rows="1"
      label="视频描述"
      placeholder="请输入视频描述"
    />
    <van-field
      v-model="category"
      required
      clearable
      autosize
      type="textarea"
      rows="1"
      label="视频分类"
      placeholder="请输入视频分类"
    />
    <van-cell
      disabled
      title="缩略图"
      style="width: 50%; float: left;"
    />
    <van-icon name="photograph" style="margin: 14px 0; width: 50%;" @click="clickImage"/>
    <img src="" id="imageDemo" style="width: 100%; display: none;">
    <van-cell
      disabled
      title="上传视频"
      style="width: 50%; float: left;"
    />
    <van-icon name="photograph" style="margin: 14px 0; width: 50%;" @click="clickVideo"/>
    <form enctype="multipart/form-data" method="post" id="formVideo" target="nm_iframe">
      <input type="file" name="image" accept="image/*" ref="image" multiple="multiple" id="image"
             @change="changeImage"/>
      <input type="file" name="video" accept="video/*" ref="video" multiple="multiple" id="video"
             @change="changeVideo"/>
    </form>
    <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
    <video controls preload="auto" id="videoDemo" style="width: 100%; display: none;"></video>
    <van-button size="large" style="float: right;" @click="submitInfo">提交</van-button>
    <div style="clear:both; height: 0;"></div>
  </van-cell-group>
</template>

<script>
  import {Field, Cell, CellGroup, Stepper, Button, Icon, Picker, Toast} from 'vant';

  export default {
    name: "AddVideos",
    components: {
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Stepper.name]: Stepper,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Picker.name]: Picker,
      [Toast.name]: Toast,
    },
    data() {
      return {
        name: "",
        description: "",
        category: "",
      }
    },
    methods: {
      submitInfo() {
        let _this = this;
        let token = _this.getCookie("token");
        let d = document.getElementById("videoDemo").duration;
        d = d.toString();
        let temp = parseInt(d.split(".")[0]);
        let duration = 0;
        if(temp < 60){
          duration = temp + "秒";
        }
        else if(temp >= 60){
          duration = temp / 60 + "分" + temp % 60 + "秒";
        }
        console.log(duration);
        let video = $('#video').get(0).files[0];
        let image = $('#image').get(0).files[0];
        let form = document.getElementById("formVideo");
        let formData = new FormData(form);
        formData.append("name", _this.name);
        formData.append("description", _this.description);
        formData.append("category", _this.category);
        formData.append("duration", duration);
        formData.append("video", video);
        formData.append("image", image);
        $.ajax({
          url: _this.apiUrl("user/exam/addVideo"),
          type: 'POST',
          cache: false,
          data: formData,
          headers: {
            'token': token,
            'sid': _this.$route.query.sid,
          },
          dataType: "json",
          processData: false,
          contentType: false,
          success: (res) => {
            // console.log(res);
            if (res.statusCode === 200) {
              Toast.success('添加成功');
              _this.name = "";
              _this.description = "";
              _this.category = "";
              _this.audioPlay();
              $("#videoDemo").css("display", "none");
              $("#imageDemo").css("display", "none");
            }
          },
          error: function (error) {
            Toast.fail('添加失败');
          }
        });
      },
      changeVideo() {
        let _this = this;
        let video = _this.$refs.video.files[0];
        $("#videoDemo").attr("src", URL.createObjectURL(video));
        $("#videoDemo").css("display", "block");
      },
      changeImage() {
        let _this = this;
        let image = _this.$refs.image.files[0];
        $("#imageDemo").attr("src", URL.createObjectURL(image));
        $("#imageDemo").css("display", "block");
      },
      clickImage() {
        $("#image").click();
      },
      clickVideo() {
        $("#video").click();
      },
      audioPlay() {
        let _this = this;
        let RandomStr = _this.randomWord(true, 10, 20);
        _this.$emit('VideoStatus', RandomStr);
      },
    },
  }
</script>

<style scoped>
  #formVideo {
    display: none;
  }

</style>
